<template>
    <!-- <div class="header block">

    </div> -->
    <div class="container block block-alone">
        <div class="search">
            下载项目列表
        </div>
        <div class="alert-box" v-if="isAlert">
            <div class="alert-describe">
                亲爱的用户，为了方便您的工作，我们将在站内为您保存下载数据链接 <text class="alert-describe-blue">48小时</text>。
            </div>
            <img src="@/assets/close.png" class="close-img point" alt="" @click="isAlert = false">
        </div>
        <el-tabs model-value="detail" >

            <div class="table">
                <!--  -->
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    :header-row-style="{ color: '#202536'}"
                    :header-cell-style="{background: '#F7F8FC'}"
                    :row-style="{ color: '#5E617D' }"
                >
                    <el-table-column
                        prop="fileName"
                        label="下载内容"
                        width="510px"
                    />
                    <!-- dateFormat -->
                    <el-table-column prop="createTime" label="生成时间" />
                    <el-table-column label="生成状态" >
                        <template #default="scope">
                            <!-- sysType -->
                            <p
                                :style="{color: scope.row.exportStatus == 1 ? '#5E617D' : scope.row.exportStatus == 2 ? '#FF7E68' : '#00D679' }"
                                class="point"
                            >
                                {{ scope.row.exportStatus == 1 ? '已生成' : scope.row.exportStatus == 2 ? '生成失败' : '生成中'  }}
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <!-- exportType -->
                            <p
                                :style="{color: '#1989FA' }"
                                class="point"
                                @click="onExport(scope.row)"
                            >
                            下载
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="pagination"
                    v-model:currentPage="pageNum"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 30, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="getDownloadHistoryList"
                >
                </el-pagination>
            </div>
        </el-tabs>
        <batchPayroll
            v-if="isBatchPay"
            @close="isBatchPay = false"
            @complete="getPayrollList"
            isType="payroll"
        />
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { BillDetailDto, BillDto } from '@/api/bill'
import { getPayrollList, payrollDelete } from '@/api/payroll'
import { downloadHistoryList } from '@/api/export'
import batchPayroll from '@/components/batch-payroll.vue'
import user from '../utils/user'
import { dateFormat, downLoadFile } from '../utils/util'
import axios from 'axios'
export default defineComponent({
    name: 'Payroll',
    components: {
        batchPayroll
    },
    data () {
        return {
            isBatchPay: false,
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tableData: [] as any,
            searchText: '',
            searchValue: '',
            detailInfo: {} as BillDto,
            selects: [] as string[],
            isAlert: true
        }
    },
    created () {
        // this.getPayrollList()
        this.getDownloadHistoryList()
    },
    methods: {
        async getDownloadHistoryList () {
            console.log('调用了吗')
            const result = await downloadHistoryList({
                pageNum: this.pageNum,
                pageSize: this.pageSize
            })
            this.total = result.total
            this.tableData = result.list
            result.list.map((item:any, index:number) => {
                this.tableData[index].createTime = dateFormat('YYYY-mm-dd HH:MM:SS', new Date(item.createTime))
            })
            console.log(result.list, '调用结果')
        },
        async getPayrollList () {
            const result = await getPayrollList({
                searchText: this.searchValue,
                pageSize: this.pageSize,
                pageNum: this.pageNum
            })
            this.total = result.total
            this.tableData = result.list
        },
        handleSizeChange (event: any) {
            console.log(event)
            this.pageNum = 1
            this.getDownloadHistoryList()
        },
        // 导出数据
        async onExport (data:any) {
            // window.location.href = data.fileUrl
            axios({
                url: data.fileUrl,
                method: 'GET',
                responseType: 'blob'
            }).then(async (response) => {
                await downLoadFile(response, data.exportType, data.updateTime, data.remark)
                await this.$message.success('导出成功！')
            })

            // this.$message.success('导出成功！')
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.header{
    padding 20px
}
.basic
    margin-top 20px
.value
    margin-right 30px

.value.important
    color color-red
    font-style italic

:deep().el-tabs__nav-scroll
    padding-right 20px
.height-right
    float: right
.download-btn
    width: 126px !important;
.btn-active
    background #ccc
.btn-red
    background: #FF7E68
:deep().el-tabs__header
    margin: 0
:deep().table
    margin-top:16px
.block-alone
    padding: 0 24px 0
.alert-box
    margin-top:16px
    padding: 8px 16px
    background: #E8F3FE
    border: 1px solid #E9F5FF
    border-radius: 2px 2px 2px 2px;
    display:flex
    justify-content: space-between
    align-items: center
.alert-describe
    color: #202536
    font-size: 14px
.alert-describe-blue
    color: #1989FA
    font-size: 14px
.search
    padding:24px 0
    font-size: 16px
    font-weight: 600
    border-bottom 1px solid #F7F8FC
.close-img
    width: 16px
    height: 16px
</style>
